<template>
    <view class="main">
        <view class="title"
            >{{ setPwd ? "请设置交易密码" : "请输入交易密码" }}
            <uni-icons @click="close" size="60" class="icon" type="closeempty"></uni-icons>
        </view>
        <view class="input-box" v-if="!setPwd">
            <input
                ref="put"
                :focus="isFocus"
                type="number"
                maxlength="6"
                @input="setPass"
                class="input"
                v-model="num" />
            <view class="item" v-for="(item, index) in putList" :key="index">{{ item }}</view>
        </view>
        <text class="forget-pwd" @click="forgetPwd()">{{
            setPwd ? "您还没设置密码，请先设置密码再进行支付" : "忘记密码"
        }}</text>
    </view>
</template>

<script>
import appMixin from "@/utils/appMixin.js"
export default {
    data() {
        return {
            putList: ["", "", "", "", "", ""],
            num: "",
            isFocus: false,
        }
    },
    props: {
        setPwd: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        setFocus(num) {
            if (num == 1) {
                this.$set(this, "isFocus", false)
                return
            }
            setTimeout(() => {
                this.$set(this, "isFocus", true)
            }, 200)
        },
        forgetPwd() {
            if (this.setPwd) {
                this.easyGoTo("/pages_shop/packet/order/changePassword?firstSetPwd=true")
            } else {
                this.easyGoTo("/pages_shop/packet/order/changePassword")
            }
        },
        close() {
            this.putList = ["", "", "", "", "", ""]
            this.num = ""
            this.$emit("close")
        },
        delete() {
            this.num = ""
            this.setPass(this.num)
        },
        setPass(e) {
            if (e == "") {
                var str = e
            } else {
                var str = e.detail.value
            }
            for (let i = 0; i < 6; i++) {
                if (str.length) {
                    if (str.charAt(i)) {
                        this.putList[i] = "*"
                    } else {
                        this.putList[i] = ""
                    }
                } else {
                    this.putList[i] = ""
                }
            }
            if (this.num.length == 6) {
                this.$emit("check", this.num)
            }
        },
    },
}
</script>

<style lang="scss">
.forget-pwd {
    color: #4996de;
    margin: 20rpx 40rpx 20rpx 40rpx;
}

.main {
    background-color: $color-white;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon {
    position: absolute;
    right: 10rpx;
    color: $color-gray-3;
    align-self: center;
    transform: translateY(-50%);
    top: 50%;
}

.title {
    width: 100%;
    position: relative;
    border-bottom: 1px solid $color-gray-6;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    display: flex;
    box-sizing: border-box;
    font-size: 28rpx;
}

.input-box {
    position: relative;
    display: flex;
    margin: 40rpx 40rpx 0 40rpx;

    input {
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        /*color: transparent;caret-color: transparent;小程序：安卓有效苹果无效*/
        margin-left: -100%;
        text-indent: -999em;
        width: 200%;
        /* opacity: 0; 真机小程序无效*/
    }

    .item {
        display: flex;
        font-size: 48rpx;
        height: 80rpx;
        width: 80rpx;
        justify-content: center;
        align-items: center;

        border: {
            top: 2rpx solid $color-gray-6;
            left: 2rpx solid $color-gray-6;
            bottom: 2rpx solid $color-gray-6;
        }
    }

    .item:last-child {
        border-right: 2rpx solid $color-gray-6;
    }
}
</style>
